import {classnames, computed, designComponent, onMounted, reactive, useClasses} from "plain-design-composition";
import React from "react";
import {unit} from "plain-utils/string/unit";
import {PlCollapseTransition, PlIcon, PlLoadingMask, PlScroll} from "plain-design";
import {ManagerMenuService} from "../../ManagerMenuService";
import {nav} from "@/micro/nav/nav";

export const ManagerMenu = designComponent({
    props: {
        headSize: {type: Number, required: true},
        title: {type: String, required: true},
    },
    setup: ({props}) => {

        const styles = computed(() => {
            const head = {height: unit(props.headSize)!}
            const body = {top: unit(props.headSize)!}
            return {head, body}
        })

        onMounted(async () => {
            await ManagerMenuService.init()
            if (nav.state.tabs.length === 0) {
                ManagerMenuService.openHome()
            }
        })

        return () => (
            <div className="pro-manager-menu">
                <div className="pro-manager-menu-head" style={styles.value.head}>
                    {props.title}
                </div>
                <div className="pro-manager-menu-body" style={styles.value.body}>
                    <PlScroll fitHostWidth>
                        <div className="pro-manager-menu-group-list">
                            {ManagerMenuService.state.MenuGroups.map((group, groupIndex) => (
                                <div className={classnames([
                                    'pro-manager-menu-group',
                                    {
                                        'pro-manager-menu-group-show': !group.collapse,
                                    }
                                ])} key={groupIndex}>
                                    <div className="pro-manager-menu-group-name" onClick={() => group.collapse = !group.collapse}>
                                        <PlIcon icon={group.icon}/>
                                        <span>{group.name}</span>
                                        <div className="pro-menu-placeholder"/>
                                        <PlIcon icon="el-icon-arrow-down" className={"pro-menu-arrow"}/>
                                    </div>
                                    <PlCollapseTransition show={!group.collapse}>
                                        <div className="pro-manager-menu-list">
                                            {group.menus.map((menu, index) => (
                                                <div className='pro-manager-menu-item' key={index} onClick={() => ManagerMenuService.openMenu(menu)}>
                                                    {menu.name}
                                                </div>
                                            ))}
                                        </div>
                                    </PlCollapseTransition>
                                </div>
                            ))}
                        </div>
                    </PlScroll>
                    <PlLoadingMask modelValue={ManagerMenuService.state.isLoading}/>
                </div>
            </div>
        )
    }
})